<template>
    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :title="title" append-to-body width="460px"
               @close="cancel">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="73px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" style="width: 320px;"
                          maxlength="7"/>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model.number="form.phone" maxlength="11"
                          style="width: 320px;"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancel">取消</el-button>
            <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>


<script>
    import {updateUserInfo} from '@/api/user'

    export default {

        data() {
            const validPhone = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入电话号码'))
                } else if (!this.isValidPhone(value)) {
                    callback(new Error('请输入正确的11位手机号码'))
                } else {
                    callback()
                }
            }
            return {
                loading: false,
                dialog: false,
                title: '修改个人信息',
                form: {name: '', phone: ''},
                rules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, trigger: 'blur', validator: validPhone}
                    ]
                }
            }
        },
        methods: {
            doSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        updateUserInfo(this.form).then(res => {
                            this.cancel()
                            this.$notify({
                                title: '用户信息修改成功',
                                type: 'success',
                                duration: 1500
                            })
                            this.$parent.upUserAfter()
                        }).catch(err => {
                            this.loading = false
                            console.log(err.response.data.message)
                        })
                    } else {
                        return false
                    }
                })
            },
            isValidPhone(str) {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                return reg.test(str)
            },
            cancel() {
                this.dialog = false
                this.loading = false
                this.$refs['form'].resetFields()
                this.form = {id: '', name: '', phone: ''}
            }
        }
    }
</script>

<style scoped>

</style>
